<script setup lang="ts">
import { h, ref, onMounted } from 'vue'
import {
  Layout as ALayout,
  Menu as AMenu,
  Breadcrumb as ABreadcrumb,
  Dropdown as ADropdown,
  Avatar as AAvatar,
  message,
} from 'ant-design-vue'
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  TeamOutlined,
  LogoutOutlined,
  UserOutlined,
  DownOutlined,
  HomeOutlined,
  FileOutlined,
  WarningOutlined,
  CheckOutlined,
  TagOutlined,
  DashboardOutlined,
  FolderOutlined,
} from '@ant-design/icons-vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import type { MenuInfo } from 'ant-design-vue/es/menu/src/interface'

const collapsed = ref(false)
const router = useRouter()
const userStore = useUserStore()

// 检查登录状态
const checkLoginStatus = () => {
  const token = localStorage.getItem('token')
  const storedUserInfo = localStorage.getItem('userInfo')

  if (!token || !storedUserInfo) {
    userStore.logout()
    router.push('/login')
    return
  }

  // 如果 store 中没有用户信息，但 localStorage 中有，则恢复
  if (!userStore.userInfo && storedUserInfo) {
    userStore.setUserInfo(JSON.parse(storedUserInfo))
  }
}

// 在组件挂载时检查登录状态
onMounted(() => {
  checkLoginStatus()
  // 从当前路由路径获取当前页面
  const path = router.currentRoute.value.path
  currentRoute.value = path.split('/')[1] || ''
})

const menuItems = [
  {
    key: '', // 空字符串对应根路径
    icon: () => h(HomeOutlined),
    label: '首页',
    title: '首页',
  },
  {
    key: 'users',
    icon: () => h(TeamOutlined),
    label: '用户管理',
    title: '用户管理',
  },
  {
    key: 'posts',
    icon: () => h(FileOutlined),
    label: '帖子管理',
    title: '帖子管理',
  },
  {
    key: 'check',
    icon: () => h(CheckOutlined),
    label: '审核管理',
    title: '审核管理',
  },
  {
    key: 'reported',
    icon: () => h(WarningOutlined),
    label: '举报管理',
    title: '举报管理',
  },
   {
    key: 'files',
    icon: () => h(FolderOutlined),
    label: '文件管理',
    title: '文件管理',
  },
  {
    key: 'datascreen',
    icon: () => h(DashboardOutlined),
    label: '数据大屏',
    title: '数据大屏',
  },
  {
    key: 'version',
    icon: () => h(TagOutlined),
    label: '版本管理',
    title: '版本管理',
  },
  {
    key: 'materials',
    icon: () => h(BookOutlined),
    label: '资料管理',
    title: '资料管理',
  },
 
 
]

const userMenuItems = [
  {
    key: 'profile',
    label: '个人信息',
    icon: UserOutlined,
  },
  {
    key: 'logout',
    label: '退出登录',
    icon: LogoutOutlined,
  },
]

const currentRoute = ref('')
const getBreadcrumbItems = () => {
  switch (currentRoute.value) {
    case '':
      return [{ title: '首页' }]
    case 'users':
      return [{ title: '首页' }, { title: '用户管理' }]
    case 'profile':
      return [{ title: '首页' }, { title: '个人中心' }]
    case 'posts':
      return [{ title: '首页' }, { title: '帖子管理' }]
    case 'check':
      return [{ title: '首页' }, { title: '审核管理' }]
    case 'reported':
      return [{ title: '首页' }, { title: '举报管理' }]
    case 'version':
      return [{ title: '首页' }, { title: '版本管理' }]
    case 'files':
      return [{ title: '首页' }, { title: '文件管理' }]
    case 'datascreen':
      return [{ title: '首页' }, { title: '数据大屏' }]
    default:
      return [{ title: '首页' }]
  }
}

const handleMenuClick = (info: MenuInfo) => {
  currentRoute.value = info.key as string
  // 如果是数据大屏，跳转到独立页面
  if (info.key === 'datascreen') {
    router.push('/datascreen')
  } else {
    router.push(`/${info.key}`)
  }
}

const handleUserMenuClick = (info: MenuInfo) => {
  if (info.key === 'logout') {
    userStore.logout()
    router.push('/login')
    message.success('已退出登录')
  } else if (info.key === 'profile') {
    router.push('/profile')
  }
}
</script>

<template>
  <a-layout class="layout">
    <a-layout-sider v-model:collapsed="collapsed" collapsible class="custom-sider fixed-sider">
      <!-- 小猫爪装饰元素 -->

      <div class="paw-decoration paw-top-right"></div>
      <div class="paw-decoration paw-bottom-left"></div>

      <div class="logo">
        <img src="../assets/logo.png" alt="Logo" class="logo-img" />
        <h1 v-if="!collapsed">树岛后台</h1>
      </div>
      <a-menu
        theme="dark"
        mode="inline"
        :items="menuItems"
        @click="handleMenuClick"
        :selectedKeys="[currentRoute]"
      />
    </a-layout-sider>
     <a-layout :style="{ marginLeft: collapsed ? '80px' : '200px' }" class="right-layout">
    <a-layout>
      <a-layout-header class="header">
        <div class="header-left">
          <component
            :is="collapsed ? MenuUnfoldOutlined : MenuFoldOutlined"
            class="trigger"
            @click="() => (collapsed = !collapsed)"
          />
          <div class="breadcrumb-container">
            <ABreadcrumb>
              <ABreadcrumb.Item v-for="item in getBreadcrumbItems()" :key="item.title">
                <span class="breadcrumb-item">
                  <HomeOutlined v-if="item.title === '首页'" />
                  <span>{{ item.title }}</span>
                </span>
              </ABreadcrumb.Item>
            </ABreadcrumb>
          </div>
        </div>
        <div class="header-right">
          <a-dropdown :trigger="['click']">
            <div class="user-dropdown">
              <a-avatar
                :src="userStore.userInfo?.avatar ?? undefined"
                :icon="!userStore.userInfo?.avatar && h(UserOutlined)"
                class="user-avatar"
              />
              <div class="user-info">
                <span class="account">{{ userStore.userInfo?.userAccount }}</span>
                <span class="role">{{
                  userStore.userInfo?.userRole === 0 ? '管理员' : '普通用户'
                }}</span>
              </div>
              <DownOutlined />
            </div>
            <template #overlay>
              <a-menu @click="handleUserMenuClick">
                <a-menu-item v-for="item in userMenuItems" :key="item.key">
                  <component :is="item.icon" />
                  <span>{{ item.label }}</span>
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </div>
      </a-layout-header>
      <a-layout-content class="content">
        <RouterView />
      </a-layout-content>
    </a-layout>
  </a-layout>
  </a-layout>
</template>
<style scoped>
.layout {
  min-height: 100vh;
  background: #f0f9ff;
}
.fixed-navbar {
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: 250px;
  z-index: 1000;
}
.content {
  margin-left: 250px;
}
.custom-sider {
  box-shadow: 2px 0 8px 0 rgba(0, 150, 136, 0.2);
  z-index: 10;
  background: linear-gradient(145deg, #1a7f7d, #1e9c8c);
  position: relative;
  overflow: hidden;
}

/* 小猫爪图案背景 */
.custom-sider::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23009688' fill-opacity='0.1'%3E%3Cpath d='M20,35 C25,30 35,30 40,35 C45,40 35,45 30,40 C25,35 20,40 20,35 Z' /%3E%3Cpath d='M60,35 C65,30 75,30 80,35 C85,40 75,45 70,40 C65,35 60,40 60,35 Z' /%3E%3Cpath d='M30,65 C35,60 45,60 50,65 C55,70 45,75 40,70 C35,65 30,70 30,65 Z' /%3E%3Cpath d='M70,65 C75,60 85,60 90,65 C95,70 85,75 80,70 C75,65 70,70 70,65 Z' /%3E%3Ccircle cx='50' cy='50' r='8' /%3E%3C/g%3E%3C/svg%3E");
  background-size: 200px;
  opacity: 0.15;
  z-index: -1;
}

.logo {
  height: 64px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(0, 121, 107, 0.25);
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  z-index: 2;
}

.logo-img {
  height: 32px;
  width: 32px;
  flex-shrink: 0;
}

.logo h1 {
  color: white;
  font-size: 16px;
  margin: 0;
  font-weight: 600;
  opacity: 1;
  transition: opacity 0.2s;
}

.header {
  background: linear-gradient(to right, #1e9c8c, #1a7f7d);
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 64px;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  position: sticky;
  top: 0;
  z-index: 9;
}

.header-left {
  display: flex;
  align-items: center;
  height: 100%;
}

.trigger {
  padding: 0 24px;
  font-size: 18px;
  cursor: pointer;
  transition: color 0.3s;
  color: #e0f7fa;
  display: flex;
  align-items: center;
  height: 100%;
}

.trigger:hover {
  color: rgb(107, 34, 34);
}

.breadcrumb-container {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 8px;
}

:deep(.ant-breadcrumb) {
  line-height: 64px;
  font-size: 14px;
}

:deep(.ant-breadcrumb-link) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #e0f7fa;
}

:deep(.ant-breadcrumb-link:hover) {
  color: white;
}

:deep(.ant-breadcrumb-separator) {
  color: rgba(255, 255, 255, 0.65);
}

.breadcrumb-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.header-right {
  padding-right: 24px;
}

.user-dropdown {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 12px;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.3s;
  background: rgba(255, 255, 255, 0.15);
}

.user-dropdown:hover {
  background: rgba(255, 255, 255, 0.25);
}

.user-avatar {
  border: 2px solid rgba(255, 255, 255, 0.3);
  transition: all 0.3s;
  background-color: #4db6ac;
}

.user-avatar:hover {
  border-color: white;
}

.user-info {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.account {
  font-size: 14px;
  color: white;
  font-weight: 500;
}

.role {
  font-size: 12px;
  color: #e0f7fa;
}

.user-menu {
  min-width: 160px;
  border-radius: 8px;
  padding: 4px;
}

:deep(.ant-dropdown-trigger) {
  display: flex;
  align-items: center;
}

.content {
  margin: 24px;
  padding: 24px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 150, 136, 0.1);
  min-height: 280px;
  border: 1px solid #e0f2f1;
}

/* 菜单样式 */
:deep(.ant-menu-dark) {
  background: transparent;
}

:deep(.ant-menu-dark .ant-menu-item) {
  transition: all 0.3s;
  margin: 4px 8px;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.85);
}

:deep(.ant-menu-dark .ant-menu-item-selected) {
  background: rgba(0, 150, 136, 0.6) !important;
  color: white !important;
  box-shadow: 0 2px 8px rgba(0, 105, 92, 0.2);
}

:deep(.ant-menu-dark .ant-menu-item:hover) {
  background: rgba(0, 150, 136, 0.4);
  color: white;
}

:deep(.ant-menu-item .anticon) {
  color: rgba(255, 255, 255, 0.85);
}

:deep(.ant-menu-item-selected .anticon) {
  color: white;
}

/* 小猫爪装饰元素 */
.paw-decoration {
  position: absolute;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.3'%3E%3Cpath d='M5,8 C7,6 10,6 12,8 C14,10 10,12 8,10 C6,8 5,10 5,8 Z' /%3E%3Ccircle cx='10' cy='15' r='3' /%3E%3C/g%3E%3C/svg%3E");
  z-index: 1;
}

.paw-top-right {
  top: 15px;
  right: 20px;
  transform: rotate(25deg);
}

.paw-bottom-left {
  bottom: 20px;
  left: 15px;
  transform: rotate(-15deg);
}
.header {
  background: linear-gradient(to right, #1e9c8c, #1a7f7d);
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 64px;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  position: sticky;
  top: 0;
  z-index: 999; /* 低于侧边栏 */
}

/* 头部左侧样式 */
.header-left {
  display: flex;
  align-items: center;
  height: 100%;
  width: calc(100% - 200px); /* 确保有足够的空间 */
}

/* 面包屑容器 */
/* .breadcrumb-container {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 8px;
  overflow: hidden; /* 防止内容溢出 */
  /* flex-grow: 1; /* 填充可用空间  */
/* } */
/* .layout {
  min-height: 100vh;
  background: #f0f9ff;
  display: block; /* 改为块级布局
} */

/* 固定侧边栏 */
.fixed-sider {
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  z-index: 1000; /* 确保高于其他内容 */
  transition: width 0.2s; /* 添加过渡效果 */
}
.right-layout {
  min-height: 100vh;
  transition: margin-left 0.2s;
  width: calc(100% - 200px); /* 确保宽度自适应 */
  max-width: 100%; /* 防止溢出 */
}
.fixed-sider.collapsed + .right-layout {
  margin-left: 80px;
  width: calc(100% - 80px);
}
/* 右侧布局
.right-layout {
  min-height: 100vh;
  transition: margin-left 0.2s; /* 添加过渡效果 */
</style>

